<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <div class="bbs">
        <header><span id="add">我要发帖</span></header>
        <section>
            <ul id="postList">
            </ul>
        </section>
        <div class="post">
            <input class="title" placeholder="请输入标题（1-50个字符）">
            所属版块：<select id="section">
                <option value="-1" selected>请选择版块</option>
                <option value="电子书籍">电子书籍</option>
                <option value="新课来了">新课来了</option>
                <option value="新手报到">新手报到</option>
                <option value="职业规划">职业规划</option>
            </select>
            <textarea class="content"></textarea>
            <input class="btn" value="发布" id="publish"><input class="btn" value="取消" id="cancel"
                style="background: #f00;">
        </div>
    </div>

    <script>
        var avatars = ['tou01.jpg','tou02.jpg','tou03.jpg','tou04.jpg'];
        $('#add').click(function(){
            clearText();
            $('.post').show();
        });
        $('#publish').click(publish);
        $('#cancel').click(function(){
            clearText();
            $('.post').hide();
        });
        var str = ``;
        function publish() {
            if ($.trim($('.title').val()) === '') {
                alert('贴子标题不能为空');
                $('.title').focus();
                return false;
            }
            else if ($('#section').val() === '-1') {
                alert('请选择所属版块');
                $('#section').focus();
                return false;
            }
            else if ($.trim($('.content').val()) === '') {
                alert('贴子的内容不能为空');
                $('.content').focus();
                return false;
            }
            else {
                var title = $('.title').val();
                var section = $('#section').val();
                var content = $('.content').val();
                var index = Math.floor(Math.random() * avatars.length);
                var avatar = avatars[index];
                var now = new Date();
                var curTimestamp = now.getTime();
                var time = getTimeFormatText(curTimestamp);
                str = `<li>
                    <div>
                        <img src="./images/${avatar}">
                    </div>
                    <h1>${title}</h1>
                    <p style="font-weight: bold">&nbsp;${content}</p>
                    <p>
                        <span>版块：${section}</span>
                        <span>发表时间：${time}</span>
                    </p>
                </li>`;
                $('#postList').prepend(str);
                clearText();
                $('.post').hide();
            }
        }
        function clearText() {
            $('.title').val('');
            $('#section').val('-1');
            $('.content').val('');
        }


        function getTimeFormatText(dateTimeStamp) {
            var minute = 1000 * 60;
            var hour = minute * 60;
            var day = hour * 24;
            var week = day * 7;
            var halfamonth = day * 15;
            var month = day * 30;
            var now = new Date().getTime();   //获取当前时间毫秒
            var diffValue = now - dateTimeStamp;//时间差
            if (diffValue < 0) {
                return;
            }
            var minC = diffValue / minute;  //计算时间差的分，时，天，周，月
            var hourC = diffValue / hour;
            var dayC = diffValue / day;
            var weekC = diffValue / week;
            var monthC = diffValue / month;
            if (monthC >= 1 && monthC <= 3) {
                result = " " + parseInt(monthC) + "月前"
            } else if (weekC >= 1 && weekC <= 3) {
                result = " " + parseInt(weekC) + "周前"
            } else if (dayC >= 1 && dayC <= 6) {
                result = " " + parseInt(dayC) + "天前"
            } else if (hourC >= 1 && hourC <= 23) {
                result = " " + parseInt(hourC) + "小时前"
            } else if (minC >= 1 && minC <= 59) {
                result = " " + parseInt(minC) + "分钟前"
            } else if (diffValue >= 0 && diffValue <= minute) {
                result = "刚刚"
            } else {
                var datetime = new Date();
                datetime.setTime(dateTimeStamp);
                var Nyear = datetime.getFullYear();
                var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
                var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
                var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
                var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
                var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
                result = Nyear + "-" + Nmonth + "-" + Ndate
            }
            return result;
        }

    </script>

</body>

</html>